<script>
	export default {
		name: "my-settle"
	}
</script>
<script setup>
	import {
		useCartStore
	} from '@/stores/cart.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import nuni from '../../static/utils/request.js'
	const cartStore = useCartStore()
	const userStore = useUserStore()
	const changeAllChecked = () => cartStore.updateAllGoodsState(!cartStore.isAllChecked)
	// 处理结算按钮业务
	const dealSettlement = async () => {
		if (!cartStore.totalCheckedCnt) return nuni.$showMsg("请选择要结算的商品！")
		if (!userStore.addressStr) return nuni.$showMsg("请选择地址！")
		if (!userStore.token) {
			const res = await uni.showModal({
				title: "小小的提示",
				content: "尚未登录，现在去登录吗？"
			})
			if (res.cancel) return;
			uni.switchTab({
				url: '/pages/my/my',
				success: () => {
					userStore.updateBackRedirectInfo({
						openType: 'switchTab',
						from: '/pages/cart/cart'
					})
				}
			})
		}
		payOrder()
	}
	// 处理支付函数
	const payOrder = async () => {
		// 创建订单对象
		const orderInfo = {
			order_price: 0.01,
			/*cartStore.totalCheckedPrice*/
			consignee_addr: userStore.addressStr,
			goods: cartStore.cartList.filter(x => x.goods_state).map(x => ({
				goods_id: x.goods_id,
				goods_number: x.goods_count,
				goods_price: x.goods_price
			}))
		}
		const res = await nuni.request({
			url: '/api/public/v1/my/orders/create',
			method: 'POST',
			data: orderInfo
		})
		console.log(res);
	}
</script>
<template>
	<view class="settle-ctr">
		<!-- 全选 -->
		<label class="radio">
			<radio color="#C00000" :checked="cartStore.isAllChecked" @click="changeAllChecked" /><text>全选</text>
		</label>
		<!-- 合计 -->
		<view class="total-amount-box">
			合计:<text class="total-amount">￥{{cartStore.totalCheckedPrice}}</text>
		</view>
		<!-- 结算按钮 -->
		<view class="settle-btn" @click="dealSettlement">
			结算({{cartStore.totalCheckedCnt}})
		</view>
	</view>
	<view style="height: 50px;">
	</view>
</template>


<style lang="scss">
	.settle-ctr {
		position: fixed;
		bottom: -0.5px;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 99;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		font-size: 15px;
		padding-left: 6px;

		.radio {
			display: flex;
			align-items: center;
		}

		.total-amount-box {
			.total-amount {
				color: #C00000;
				font-weight: bold;
			}
		}

		.settle-btn {
			height: 100%;
			color: #fff;
			background-color: #C00000;
			line-height: 50px;
			padding: 0 15px;
			min-width: 90px;
			text-align: center;
		}
	}
</style>